<template>
    <div class="box" ref="box_scrollr">
        <div ref="div_scrollr">
            <ClassIfy :crumbs="data.crumbs" :chilg="data.datalength"></ClassIfy>
            <!-- 更多的排版 -->
            <Class :classifyIs="data.classifyIs" :change="data.change" :more="data.more" :mores="data.mores"
                :rests="data.rests" :restsIs="restsIs"></Class>
            <!-- 排序 -->
            <Sort :sort="data.sort" :seotIndex="data.seotIndex"></Sort>
            <!-- 卡片区域 -->
            <div class="chart_box">
                <!-- <div class="img_box" v-for="(item, index) in data.arrData" :key="index">
                        {{ index }}
                       {{ item.id }} 
                        <Card :chartData="item" :key="index" ></Card>
                    </div> -->
                <Waterfall v-if="data.isif" :list="data.arrData" :gutter="0" :hasAroundGutter="false" :align="'left'"
                    :lazyload="false">
                    <template #item="{ item, url, index }">
                        <div class="card" :rowKey="index">
                            <LazyImg :url="url" />
                            <Card :chartData="item"></Card>
                        </div>
                    </template>
                </Waterfall>
                <Waterfall v-else :list="data.arrData" :gutter="0" :hasAroundGutter="false" :align="'left'"
                    :lazyload="false">
                    <template #item="{ item, url, index }">
                        <div class="card" :rowKey="index">
                            <LazyImg :url="url" />
                            <Card :chartData="item"></Card>
                        </div>
                    </template>
                </Waterfall>
                <el-table v-loading="loading" style="width: 100%" :element-loading-text="loading_text">
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, computed, onBeforeMount, onBeforeUpdate } from 'vue';
import { get_moreData } from '../../../../utils/api';
import ClassIfy from './component/class/ClassIfy.vue';
import Card from '../../../../components/Card/index.vue';
import Class from "./component/classi/index.vue";
import { provide } from 'vue';
import Sort from './component/sort/index.vue';
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next';
import 'vue-waterfall-plugin-next/dist/style.css';

const loading = ref(false);
const loading_text = ref('加载中...');
const box_scrollr = ref();
const div_scrollr = ref();

const data = reactive({
    // 
    isif: false,
    // 排序的默认高亮
    seotIndex: 0,
    more: [
        {
            text: 'H5',
            istext: false,
        },
        {
            text: '海报',
            istext: false,
        },
        {
            text: '长页',
            istext: false,
        },
        {
            text: '电子画册',
            istext: false,
        },
        {
            text: '表单',
            istext: false,
        }, {
            text: '视频',
            istext: false,
        },
    ],
    mores: [

        {
            id: 1,
            h1: '用途',
            ishow: false,
            use: ['邀请函', '人才招聘', '培训招生', '宣传介绍', '活动促销', '通知公告', '祝福问候', '行政办公', '人物介绍', '心情日签', '音乐相册', '总结汇报', '表单信息'],
        },
        {
            id: 2,
            h1: '行业',
            ishow: false,
            use: ['培训招生', '宣传介绍', '活动促销', '通知公告', '祝福问候', '行政办公', '人物介绍', '心情日签', '音乐相册', '总结汇报', '表单信息'],
        },

    ],
    rests: [
        {
            id: 3,
            h1: '节假',
            ishow: false,
            use: ['24节气', '纪念日', '元旦', '元旦', '双十一', '万圣节', '人物介绍', '心情日签', '音乐相册', '总结汇报', '表单信息'],
        },
        {
            id: 4,
            h1: '风格',
            ishow: false,
            use: ['炫彩', '手绘', '卡通', '搞笑', '创意', '清新', '商务', '科技', '简约', '中国风', '复古'],
        },
    ],
    seotData: [
        '综合排序',
        '最新',
        '最热',
        '排序',

    ],
    seotDatas: [
        {
            id: 1,
            text: '颜色',
            chi: ['conic-gradient(from 45deg, red,rgb(217, 0, 255) 20%, orange 50%,rgb(68, 255, 0) 70%, yellow 85%, red)', '#0245FF', '#FFAADB', '#EE00FF', '#FF0002', '#1B4A28', '#F08201', '#FFF100', '#040400', '#FFFFFF']
        }, {
            id: 2,
            text: '板式',
            chi: ['全部', '横版', '竖版', '方图']
        },
        {
            id: 3,
            text: '板式',
            chi: ['全部', '0-15秒', '16-59秒', '一分钟以上']
        },
        {
            id: 4,
            text: '价格',
            chi: ['全部', '会员免费', '免费'],
            chi2: ['全部', '企业会员免费', '个人会员免费']
        }
    ],
    // 总数据
    datas: [],
    // 渲染的数据
    arrData: [],
    // 数据长度
    datalength: 0,
    // 面包屑数据
    crumbs: [

    ],
    // 请求回的总数居
    newdatas: [],
    filterdatas: [],
    // 排序样式
    sort: 0,
    // 下表
    indexAll: [
        {
            index: 0,
        },
        {
            index: 0,
        },
        {
            index: 0,
        },
        {
            index: 0,
        }

    ],
    classifyIs: true,
    // 多选按钮的显示和隐藏
    change: true,
    // 暂存区
    newdata: []
});
let len = 1;
const getmoredata = (arr: any, sum: number) => {

    let newdata = [];
    let i = 0;
    while (i < arr.length) {
        newdata.push(arr.slice(i, i + sum));
        i += sum;
    }

    return newdata;
};
// 渲染函数 
let datalen = 0;
const render = (len: any = 0) => {

    datalen = data.arrData.length / 70;
    loading.value = true;
    if (data.arrData.length >= data.newdatas.length) {
        // 没有数据了
        loading_text.value = '没有更多数据了';
        setTimeout(() => {
            loading.value = false;
        }, 500);
        return;
    }

    data.arrData = [...data.arrData, ...data.datas[datalen]];
};
// 处理数组
const ageArr = (datas: any, lens: number) => {
    data.datas = getmoredata(datas, lens) as any;
    render(0);
};
// 计算其他的数据
const restsIs = computed(() => {
    return data.rests.length !== 0;
})
    ; (async () => {
        const result = await get_moreData();
        data.newdatas = [...result.data.data, ...result.data.data] as any;
        data.filterdatas = [...result.data.data, ...result.data.data] as any;
        // 数据长度
        data.datalength = data.newdatas.length;
        // 处理数组
        ageArr(data.newdatas, 70);
    })();
// 点击排序
const onSoret = (index: Number) => {
    data.seotIndex = index as any;
    if (index === 3 && data.sort === 0 || data.sort === 2) {
        data.sort = 1;
    } else if (index === 3 && data.sort === 1) {
        data.sort = 2;
    } else {
        data.sort = 0;
    };
    if (index !== 3) {
        data.sort = 0;
    }
};
let scrIs = true;

onMounted(() => {
    window.onscroll = (e: any) => {
        let scrollTop = document.documentElement.scrollTop;//滚动高度
        let clientHeight = document.documentElement.clientHeight;//可视高度
        let scrollHeight = document.documentElement.scrollHeight;//内容高度
        if (scrollTop + clientHeight >= scrollHeight - 1) {
            if (scrIs) render(len);
            scrIs = false;
            setTimeout(() => {
                scrIs = true;
            }, 1000) as any;
        }
    };
});
// 点击类型
const onclass = (text: any) => {
    let enwarr = '';
    if (text === null) {
        let nub = 0;
        data.more.forEach(element => {
            if (element.istext) {
                if (nub === 0) {
                    enwarr += element.text;
                    nub += 1;
                } else {
                    enwarr += ',' + element.text;
                }
            }
        });
        if (nub === 0) {
            data.change = true;
            return;
        }
        data.crumbs.push(enwarr as never);
        data.change = true;
        data.classifyIs = false;

    } else {
        data.classifyIs = false;
        data.crumbs.push(text as never);
    }
    onFiltration();
};
// 做筛选
const onFiltration = () => {
    data.arrData.length = 0;
    let newData: never[] = [];
    if (data.crumbs.length === 0) {

        data.filterdatas.map((element: any) => {

            newData.push(element as never);
        });
    } else {

        data.filterdatas.map((element: any) => {
            element.class_detail.forEach((value: any, index: any) => {
                data.crumbs.map((item: any) => {
                    if (item === value) {
                        newData.push(element as never);
                    }
                });
            });
        }
        );
    }

    data.newdatas = newData;

    ageArr(newData, 70);
    data.isif = !data.isif;
};
// 过滤数组的每一项

// 点击删除面包屑内容
const onDelText = (item: string) => {
    // if()
    const reuleis = data.newdata.find((v: any) => v.use.includes(item));
    const resIndex = data.newdata.findIndex((v: any) => v.use.includes(item));
    if (reuleis) {
        if (data.mores.length <= 1) {
            data.mores.push(reuleis);
            data.newdata.splice(resIndex, 1);
        } else {
            data.rests.push(reuleis);
            data.newdata.splice(resIndex, 1);
        }
    } else {
        data.more.forEach((item) => {
            data.crumbs.forEach((v) => {
                if (v === item) return;
            });
        });
        data.classifyIs = true;
    }
    data.crumbs = data.crumbs.filter((v) => v !== item);
    onFiltration();
};
// 点击多选
const onchange = () => {
    data.change = !data.change;
};
// 点击分类
const onclassidy = (item: any, items: string) => {
    data.crumbs.push(items as never);
    data.mores.forEach((e, index) => {
        if (e.id === item.id) {
            data.mores.splice(index, 1);
            data.newdata.push(e as never);
        }
    });
    if (data.rests.length != 0) {
        data.mores.push(data.rests.shift() as any);
    }
    onFiltration();
};
// 点击其他
const onrests = (items: string) => {
    data.rests.forEach((e, index) => {
        if (e.use.includes(items)) {
            data.rests.splice(index, 1);
            data.newdata.push(e as never);
        }
    });
    data.crumbs.push(items as never);
};
const onFilsort = (texts: any) => {
    data.arrData.length = 0;
    let newData: never[] = [];
    if (texts === 'conic-gradient(from 45deg, red,rgb(217, 0, 255) 20%, orange 50%,rgb(68, 255, 0) 70%, yellow 85%, red)') {
        data.filterdatas.map((element: any) => {
            newData.push(element as never);
        });
    } else {
        data.filterdatas.map((element: any) => {
            element.class_detail.forEach((value: any, index: any) => {
                if (texts === value) {
                    newData.push(element as never);
                }
            });
        }
        );
    }
    data.newdatas = newData;
    ageArr(newData, 70);
    data.isif = !data.isif;
};
// 点击分类
const onClassify = (index: any, index2: any, texts: any) => {
    data.indexAll[index].index = index2;
    onFilsort(texts);

};
provide('onDelText', onDelText);
provide('onclass', onclass);
provide('onchange', onchange);
provide('onclassidy', onclassidy);
provide('onrests', onrests);
provide('seotData', data.seotData);
// provide('seotIndex',data.seotIndex);
provide('seotDatas', data.seotDatas);
provide('indexAll', data.indexAll);
provide('onClassify', onClassify);
provide('onSoret', onSoret);
</script>
<style scoped lang="scss">
// .el-breadcrumb__inner {
//     font-style: 12px !important;
// }
.span {
    color: rgb(54, 54, 255);
    font-weight: 500;
    font-style: 12px;
}

.box {
    // height: calc(100vh - 120px);
    width: calc(100% + 40px);
    min-width: calc(100% - 320px);

    // height: 100%;
    .chart_box {
        max-width: 100%;

        // padding: 50px 30px  0px;
        div {
            break-inside: avoid;
            padding-bottom: 25px;
        }

        .vue-waterfall {
            overflow-y: none !important;
            transition: all 0s;
        }
    }


    .com_list {
        background: hsl(210, 36%, 96%);
        display: flex;
        padding: 2px 3px;
        border-radius: 3px;
        cursor: pointer;
        padding: 4px;

        .del {
            margin-left: 6px;
        }
    }

    // margin-left: 5px;
}


.img_box {
    width: 100%;
}

.select {
    border: #fff;

}

// .select:focus-visible {
//     outline: unset !important;
// }
// .vue-waterfall {
//     overflow-y: hidden;
// }
.lazy__box {
    // padding: 0 !important;
}

.card_box {
    // padding: 0 !important;
}
</style>
